HTTP Live Streamingで動画を配信してみる

HTTP Live Streamingで動画を配信してみる

Clock Icon2016.06.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

HTTP Live Streamingとは、米アップルによって開発された動画配信技術です。

特徴として以下のものが挙げられます。

  • 通常のHTTPサーバを利用
  • ライブ/オンデマンドいずれにも対応
  • ビットレートの異なる複数の代替ストリームをサポート
  • クライアントはネットワーク帯域の変更に応じて、インテリジェントにストリーム切り替えが可能
  • HTTPSを使用したメディアの暗号化とユーザ認証に対応

ネットワーク帯域の変化に対応して、クライアントが動的にストリー ムを選択できるということは、デバイスが、4G・WiFi間などを移動した場合でも、常に最適なストリームを供給することが可能ということであり、これはプログレッシブなダウンロードに比べても、相当に有利な条件と言えます。

再生は、クライアント側が、Safari(UIWebView)の場合は、videoタグのソースとして配信し、アップル関連のクライアントであれば、QTKit/AVFoundationフレームワーク(OS X)、MediaPlayer/AVFoundationフレームワーク(iOS)を利用してアプリ実装が可能です。

2 動画配信テクノロジー

ここで、各種の動画配信テクノロジーの中で、HTTP Live Streamingが、どのような位置付けになるか、改めて整理しておきたいと思います。

(1) 代表的な3つのテクノロジー

動画配信の代表的なテクノロジーは、次の3つです。

ストリーミング

  • 専用プロトコル
  • コンテンツがクライアントに残らず、セキュアな再生が可能
  • 専用プレーヤーが必要
  • NW/サーバ共に多くの資源を必要とする

HTTPダウンロード

  • クライアントに依存しない
  • Webサーバだけで配信可能
  • コンテンツがクライアントに残るため保護が難しい
  • 再生制御に制約が多い
  • ライブ配信未対応

HTTPストリーミング

  • 標準プレーヤー、プラグイン等で再生可能
  • NW/サーバに多くの資源を要しない
  • デバイス毎に配信フォーマットが異なる

(2) 各プラットフォームに対応する配信方式

そして、代表的な配信方式を一覧すると次のようになります。

ストリーミング HTTPダウンロード HTTPストリーミング
001 009 HTML5 007 HLS
002 005 RTMP 009 HTML5 010 HDS 007 HLS 008 Silverlight
003 005 RTMP 006 MMS/RTSP 009 HTML5 010 HDS 007 HLS(注1) 008 Silverlight
004 005 RTMP 009 HTML5 010 HDS 007 HLS 008 Silverlight


参考:動画配信プラットフォーム on AWS 2014.05.22 Amazon Data Service Japan

上図の中の 007 HLSがHTTP Live Streamingです。 HTTPストリーミングの配信技術で、全てのプラットフォームに対応していると言えます。

(注1) QuickTime Player 10以上や、るMicrosoft Edge(Windows10)で再生可能です。InternetExplorerでは再生できません。

3 構成

HTTP Live Streamingの構成は、次の図で表現できます。

iPhoneなどのクライアントは、Webサーバに配置された動画ファイルにHTTP(HTTPS)でアクセスします(①)。

Webサーバ上の動画ファイルは、メディアセグメントファイル(.ts MPEG-2トランスポートストリームファイル)と、インデックスファイル(.M3U8 プレイリスト)からなります(②)。 クライアントがアクセス先として使用するURLは、インデックスファイル(.M3U8)であり、この中に各.tsをたどるための情報が格納されています。

上記のメディアセグメントファイル及び、インデックスファイルは、セグメンターによって作成されますが、これには 、ライブ配信用の「ストリームセグメンター(③)」と「ファイルセグメンター(④)」があります。

そして、ライブ配信の場合は、「メディアエンコーダー(⑤)」によって、オーディオビデオデバイスから取り込んだリアルタイムの信号を、エンコード・トランスポート用カプセル化し、ストリームセグメンターの入力とします。

Webサーバとして必要なのは、.M3U8ファイルと.tsファイルのMIMEタイプの関連付けだけで、通常、既存の設定で問題ありません。

019

4 配信用ファイルの作成

Webサーバ上に配置するファイルは、セグメンターによって生成しますが、今回は、ファイルセグメンターを利用したオンデマンド配信の要領を試してみました。

(1) HTTP Live Streaming Tools

ストリームセグメンター及び、ファイルセグメンターは、共にAppleデベロッパウェブサイトからダウンロートできるソフトウエアです。(iOSデベロッパプログラムの会員である必要があります)

https://developer.apple.com/streaming/ 012

上記ページでDownloadのリンクをたどり、HTTP Live Streaming Toolsで検索するとdmgをダウンロードできます。

013

ダウンロードした、dmgをインストールすると下記のプログラムが配置されます。

/usr/local/bin/mediastreamsegmenter
/usr/local/bin/mediafilesegmenter
/usr/local/bin/mediasubtitlesegmenter
/usr/local/bin/variantplaylistcreator
/usr/local/bin/mediastreamvalidator
/usr/local/bin/hlsreport.py
/usr/local/bin/id3taggenerator

今回使用するのは、このうちのmediafilesegmenterです。

(2) mediafilesegmenter

変換しようとするソースが有効かどうかは、mediafilesegmenterで確認できます。

$ mediafilesegmenter -V source.mp4
"source.mp4" can be segmented

フォルダ(hls)を作成して、その中に、ts及びインデックスを作成するには、次のようになります。

$ mkdir hls
$ mediafilesegmenter -f hls -i index.m3u8 -B media- source.mp4
$ ls -la hls
total 80184
drwxr-xr-x  17 sin  staff      578  6  4 08:33 .
drwxr-xr-x   4 sin  staff      136  6  4 08:33 ..
-rw-rw-r--   1 sin  staff     3070  6  4 08:33 iframe_index.m3u8
-rw-r--r--   1 sin  staff      506  6  4 08:33 index.m3u8
-rw-r--r--   1 sin  staff  3287368  6  4 08:33 media-0.ts
-rw-r--r--   1 sin  staff  2796876  6  4 08:33 media-1.ts
-rw-r--r--   1 sin  staff  3602644  6  4 08:33 media-10.ts
-rw-r--r--   1 sin  staff  2177980  6  4 08:33 media-11.ts
-rw-r--r--   1 sin  staff    70312  6  4 08:33 media-12.ts
-rw-r--r--   1 sin  staff  3657540  6  4 08:33 media-2.ts
-rw-r--r--   1 sin  staff  4128856  6  4 08:33 media-3.ts
-rw-r--r--   1 sin  staff  2971528  6  4 08:33 media-4.ts
-rw-r--r--   1 sin  staff  2985816  6  4 08:33 media-5.ts
-rw-r--r--   1 sin  staff  3830876  6  4 08:33 media-6.ts
-rw-r--r--   1 sin  staff  3802112  6  4 08:33 media-7.ts
-rw-r--r--   1 sin  staff  3884456  6  4 08:33 media-8.ts
-rw-r--r--   1 sin  staff  3823168  6  4 08:33 media-9.ts

オプションで-B media-とすることで、media-連番のファイルが生成されています。

5 配信用ファイルの配置

AWSのS3にファイルを配置して、テストしてみました。

(1) index.html

ビデオ配信のページとなるindex.htmlを次のように作成します。

index.html

<!DOCTYPE html>  
<div>  
  <h2>HTTP Live Streaming</h2>
  <video src="index.m3u8" width=640 height=360 controls></video>
</div>  

(2) S3へのアップロード

S3でhls-sampleという名前でバケットを作成し、セグメンターで生成したファイルとindex.htmlをアップロードしました。

014 016

続いて、静的なWebサイトのホスティングを有効にし、閲覧可能なようにポリシーを追加しました。

017

Backet Poricy

{
    "Version": "2016-06-04",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::hls-sample/*"
        }
    ]
}

(3) Safariでの表示

Static Website Hostingのエンドポイントに、Safariでアクセスすると、動画が再生できることを確認できます。

6 最後に

今回は、HTTP Live Streamingを使用して、基本的なHTTPストリーミングをやってみました。 次は、帯域に応じた配信や、HTTP Live Streamingのクライアント側も作成してみたいと思います。

※動画は、ATTRIBUTION LICENSE 3.0 で公開されている、Ricardo Mantilla氏のものを利用させて頂きました。
http://mazwai.com/#/videos/216

7 参考資料

HTTPライブ ストリーミングの概要
How to set up HTTP Live Streaming (VOD) on Macbook using Apple's official tools 31 DECEMBER 2015

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.